<template>
  <el-container>
    <el-header class="">Header</el-header>
    <el-main>
      <el-row>
        <el-col>
          <vue-editor
            v-model="content"
            useCustomImageHandler
            @imageAdded="imageAdded"
          ></vue-editor>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-button type="text" @click="open">点击打开 Message Box</el-button>
          <el-alert
            title="成功提示的文案"
            type="success">
          </el-alert>
        </el-col>
      </el-row>
      <el-dropdown @command="aaa">
        <el-button type="primary">
          更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="黄金糕">黄金糕</el-dropdown-item>
          <el-dropdown-item command="狮子头">狮子头</el-dropdown-item>
          <el-dropdown-item command="螺蛳粉">螺蛳粉</el-dropdown-item>
          <el-dropdown-item command="双皮奶">双皮奶</el-dropdown-item>
          <el-dropdown-item command="蚵仔煎">蚵仔煎</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-row>
        <el-col>
          <div id="main">
            <mavon-editor v-model="value"/>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <el-footer class="">Footer</el-footer>
  </el-container>
</template>


<script>
  import {VueEditor} from 'vue2-editor'
  import { Toast } from 'mint-ui';
  import md5 from 'js-md5';
  
  export default {
    data() {
      return {
        content: '这是富文本编辑器的测试内容',
        value: '这是富文本编辑器的测试内容',
      }
    },
    components: {
      VueEditor
    },
    methods: {
      imageAdded(file, Editor, cursorLocation, resetUploader) {
        
        let formData = new FormData();
        formData.append("image", file);
        
        dump(file);
        
        //压缩图片
        imgCompress(file, 400, function (newFile) {
          
          dump(newFile);
          fPost("http://192.168.0.254:8001/admin/groups/index", formData, function (res) {
            
            //在编辑器中显示图片
            let reader = new FileReader();
            reader.readAsDataURL(newFile);
            reader.onloadend = function () {
              Editor.insertEmbed(cursorLocation, "image", reader.result);
            };
            
            resetUploader();
          });
        });
      },
      open() {
        this.$confirm('是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      aaa(a) {
        /* this.$message({
		   message: '恭喜你，这是一条成功消息',
		   type: 'error',
		   dangerouslyUseHTMLString: true,
		 });*/
        
        /*this.$alert(a, '标题名称', {
          confirmButtonText: '确定',
          callback: action => {
          
          }
        });*/
        
        /*this.$prompt('请输入邮箱', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
          inputErrorMessage: '邮箱格式不正确'
        }).then(({value}) => {
          this.$message('你的邮箱是: ' + value);
        }).catch(() => {
          alert()
        });*/
        
        /*this.$msgbox({
          title: '消息',
          message: a,
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          beforeClose: (action, instance, done) => {
            dump(action);
            done();
          }
        }).then(action => {
          alert(2)
        }).catch(() => {
          alert(3)
        });*/
        
        /*this.$notify({
          title: '提示',
          message: '这是一条不会自动关闭的消息',
          duration: 0,
          type: 'warning',
          position: 'bottom-right',
        });*/
        
        /*  this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '保存',
          cancelButtonText: '放弃修改'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '保存修改'
            });
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃保存并离开页面'
                : '停留在当前页面'
            })
          });*/
      },
    },
    watch: {
      content(o, n) {
      }
    },
    mounted(){
      Toast('提示信息');
     let aa= md5("123456");
     this.$alert(aa);
    },
  };
</script>

<style scoped lang="scss">
  
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

</style>
